<template>
  <div class="subMenu-container">
    <template v-for="subItem in filterMenuList" :key="subItem.path">
      <el-sub-menu v-if="subItem.meta.show && subItem.children && subItem.children.length" :index="subItem.path">
        <template #title>
          <component :is="renderIcon(subItem)" v-if="subItem.meta.icon" />
          <span>{{ subItem.meta.title }}</span>
        </template>
        <SubMenu :menu-list="subItem.children" />
      </el-sub-menu>
      <template v-else>
        <router-link :to="subItem.path">
          <el-menu-item v-if="subItem.meta.show" :index="subItem.path">
            <template #title>
              <component :is="renderIcon(subItem)" />
              <span>{{ subItem.meta.title }}</span>
            </template>
          </el-menu-item>
        </router-link>
      </template>
    </template>
  </div>
</template>
<script setup lang="tsx">
import { ref } from 'vue'
import SvgIcon from '@/composables/svg-icon/svg-icon.vue'
import { RouteRecordRaw, useRoute } from 'vue-router'
const route = useRoute()
const props = defineProps<{ menuList: any[] }>()
const filterMenuList = ref(props.menuList)
const renderIcon = (subItem: RouteRecordRaw) => {
  const isActive = route.path.includes(subItem.path)
  if (!subItem.meta?.icon) return null
  const iconName = isActive ? `${subItem.meta.icon}_active` : subItem.meta.icon
  return <SvgIcon class="mr-2" name={iconName} size={14} />
}
</script>
<style scoped lang="scss"></style>
